<template>
  <div class="tipsitems-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="头像">
              <span> <el-avatar shape="square" :size="50" :src="props.row.avatar"></el-avatar></span>
            </el-form-item>
            <el-form-item label="消息类型">
              <span>{{ props.row.tips_type }}</span>
            </el-form-item>
            <el-form-item label="用户名">
              <span>{{ props.row.username }}</span>
            </el-form-item>
            <el-form-item label="时间">
              <span>{{ props.row.request_time }}</span>
            </el-form-item>
            <el-form-item label="用户ID">
              <span>{{ props.row.user_id }}</span>
            </el-form-item>
            <el-form-item label="内容">
              <span>{{ props.row.content }}</span>
            </el-form-item>
            <el-form-item label="操作">
              <span>
                <el-button type="success" @click="agree(props.row.user_id)">同意</el-button>
                <el-button type="info" @click="disAgree(props.row.user_id)">不同意</el-button>
              </span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="头像" width="100">
        <template slot-scope="scope">
          <span> <el-avatar shape="square" :size="50" :src="scope.row.avatar"></el-avatar></span>
        </template>
      </el-table-column>

      <el-table-column label="日期">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.request_time }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户名" prop="username"> </el-table-column>
      <el-table-column label="消息类型" prop="tips_type"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TipsItems',
  props: ['userInfo'],
  data () {
    return {
      tableData: []
    }
  },
  methods: {
    async agree (friendsId) {
      const myId = localStorage.getItem('_id')
      var formData = {
        code: 0,
        friendsForm: {
          friendsId: friendsId
        },
        myForm: {
          myId
        }
      }
      formData = JSON.stringify(formData)
      const { data: res } = await this.$api.agreeOrDisagree({ formData })
      console.log(res)
    },
    disAgree (friendsId) {
      console.log(friendsId)
    }
  },
  watch: {
    userInfo: function (newVal) {
      this.tableData = newVal.friends_circle.requested_list
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].request_time = this.$forMat(this.tableData[i].request_time)
      }
      console.log(newVal)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .demo-table-expand {
  font-size: 0;
}
/deep/ .demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
/deep/ .demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
